<script setup lang="ts">
// AI辅助诊断组件
import { ref } from 'vue';

// 综合总结内容
const summaryContent = ref('');

// 智能分析结果
const analysisResult1 = ref('');
const confidenceScore1 = ref(4);
const analysisResult2 = ref('');
const confidenceScore2 = ref(3);

// 症状评估内容
const symptomContent = ref('');
</script>

<template>
  <div class="ai-diagnosis">
    <h2 class="title">AI辅助诊断</h2>

    <div class="diagnosis-container">
      <!-- 综合总结部分 -->
      <div class="summary-section">
        <h3>综合总结</h3>
        <div class="summary-content">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="AI诊断综合总结内容"
            v-model="summaryContent"
            :readonly="true"
          />
        </div>
      </div>

      <!-- 辅助诊疗校验部分 -->
      <div class="verification-section">
        <h3>辅助诊疗校验</h3>

        <div class="verification-content">
          <!-- 智能分析结果区域 -->
          <div class="analysis-results">
            <h4>智能分析结果</h4>

            <!-- 分析结果项 1 -->
            <div class="analysis-item">
              <div class="analysis-item-content">
                <div class="analysis-text">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="分析结果1详情"
                    v-model="analysisResult1"
                    :readonly="true"
                  />
                </div>
                <div class="analysis-actions">
                  <el-button size="small">详情</el-button>
                  <div class="confidence-score">
                    <span>置信度评分:</span>
                    <el-rate
                      v-model="confidenceScore1"
                      disabled
                      show-score
                      text-color="#ff9900"
                    />
                  </div>
                  <el-button type="primary" size="small">确定</el-button>
                </div>
              </div>
            </div>

            <!-- 分析结果项 2 -->
            <div class="analysis-item">
              <div class="analysis-item-content">
                <div class="analysis-text">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="分析结果2详情"
                    v-model="analysisResult2"
                    :readonly="true"
                  />
                </div>
                <div class="analysis-actions">
                  <el-button size="small">详情</el-button>
                  <div class="confidence-score">
                    <span>置信度评分:</span>
                    <el-rate
                      v-model="confidenceScore2"
                      disabled
                      show-score
                      text-color="#ff9900"
                    />
                  </div>
                  <el-button type="primary" size="small">确定</el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 评估症状区域 -->
          <div class="symptom-assessment">
            <h4>评估症状</h4>
            <div class="symptom-content">
              <el-input
                type="textarea"
                :rows="12"
                placeholder="症状评估内容"
                v-model="symptomContent"
                :readonly="true"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ai-diagnosis {
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
}

.diagnosis-container {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  padding: 20px;
}

.summary-section,
.verification-section {
  margin-bottom: 20px;
}

.summary-section h3,
.verification-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 500;
}

.summary-content {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 10px;
}

.verification-content {
  display: flex;
  gap: 20px;
}

.analysis-results {
  flex: 3;
}

.symptom-assessment {
  flex: 2;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 10px;
}

.analysis-results h4,
.symptom-assessment h4 {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 500;
}

.analysis-item {
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 15px;
}

.analysis-item-content {
  display: flex;
  flex-direction: column;
}

.analysis-text {
  margin-bottom: 10px;
}

.analysis-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.confidence-score {
  display: flex;
  align-items: center;
  gap: 5px;
}
</style>
